【ES6 教程】第四章 ES6类08—JavaScript new.target 元属性介绍

英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在今天的文章中，我们将一起来学习 JavaScript new.target 元属性，它该属性会检测是否使用了 new 运算符调用了函数或构造函数。

JavaScript new.target 简介

ES6 提供了一个名为 new.target 的元属性，它允许你检测是否使用了new 运算符调用了函数或构造函数。

new.target 由 new 关键字、一个点和 target 属性组成。new.target 在所有函数中都可用。

但是，在箭头函数中，new.target 是属于周围函数的那个。

new.target 对于在运行时检查函数是作为函数还是作为构造函数执行非常有用。在父类中确定使用 new 运算符调用的特定派生类也很方便。

函数中的 JavaScript new.target

让我们看看下面的 Person 构造函数：

function Person(name) {
    this.name = name;
}

我们可以使用 new 运算符从 Person 函数创建一个新对象，如下所示：

let john = new Person('John');
console.log(john.name); // john

或者可以将 Person 作为函数调用：

Person('Lily');

因为 this 设置为全局对象，即在 Web 浏览器中运行 JavaScript 时的 window 对象，所以 name 属性被添加到 window 对象中，如下所示：

console.log(window.name); //Lily

为了帮助我们检测是否使用 new 运算符调用了函数，我们可以使用 new.target 元属性。

在常规函数调用中，new.target 返回 undefined。如果使用 new 运算符调用函数，则 new.target 返回对该函数的引用。

假设我们不希望 Person 被作为函数调用，我们可以使用 new.target 如下：

function Person(name) {
    if (!new.target) {
        throw "must use new operator with Person";
    }
    this.name = name;
}

现在，使用 Person 的唯一方法是使用 new 运算符从中实例化一个对象。如果我们尝试将其作为常规函数调用，则会出现错误。

构造函数中的 JavaScript new.target

在类构造函数中，new.target 指的是由 new 运算符直接调用的构造函数。如果构造函数在父类中并且是从子类的构造函数委托的，则为 true：

class Person {
    constructor(name) {
        this.name = name;
        console.log(new.target.name);
    }
}

class Employee extends Person {
    constructor(name, title) {
        super(name);
        this.title = title;
    }
}

let john = new Person('John Doe'); // Person
let lily = new Employee('Lily Bush', 'Programmer'); // Employee

在此示例中，new.target.name 是 new.target 的构造函数引用的人性化名称。

总结

在今天的教程中，我们学习了如何使用 JavaScript new.target 元属性来检测是否使用 new 运算符调用了函数或构造函数。希望今天的教程文章对你有用，如果你觉得有帮助的话，请记得点赞我，关注我，并将这篇教程文章分享给你的开发者朋友，也许对他也有用。

最后，感谢你的阅读，编程快乐！

学习更多技能

请点击下方公众号